<template>
  <div style="height: 100%">
    <header class="header">
      <div class="title">
        <img src="@/assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>{{ name.jc }}宣传部署</div>
        <div class="btn-add">
          <img src="@/assets/images/01_05.png" @click="shows = true"/>
        </div>
        <div class="btn-search">
          <img
            src="@/assets/images/big.png"
            @click="jumpQuery(userInfoData.dwid, userInfoData.lev, '/statistical_query')"/>
        </div>
      </div>
    </header>
    <div class="menPhis-main titles">
      <div class="column-box">
        <div class="column-box-title">
          <img src="@/assets/images/img-trumpet.png" class="img">
          <span style="margin-left: 5px;font-size: 0.4444rem;font-weight: 400;">宣传部署总数{{ count }}次</span>
        </div>
        <div class="column-box-title">
          <img src="@/assets/images/appa_r.png" class="img img-ts" @click="clickDate(1)">
          <div class="column-box-title" @click="show === false ? show = true : show = false">
            <span style="margin-left: 5px" :style="timeType === 1 ? 'margin-right: 5px' : ''">{{ years }}</span>
            <span v-if="timeType === 2" :style="timeType === 2 ? 'margin-right: 5px' : ''">.{{ year }}</span>
            <img src="@/assets/images/app_x.png" class="imgs">
          </div>
          <img src="@/assets/images/appa_r.png" class="img" @click="clickDate">
        </div>
      </div>
      <Field
        :columns="columns"
        :dates="dates"
        :brokenLine="brokenLine"
        :date="date"
        :dataList="dataList"
        :dataLists="dataLists"
        :peopleList="peopleList"
        @jump="jump"
        @jumps="jumps"
        @jumpColumn="jumpColumn">
      </Field>
      <div class="titles-modal" v-if="show" @click="show = false">
        <div class="titles-box">
          <div class="titles-tu"></div>
          <div class="titles-text" @click="clickBounceds(1)">年</div>
          <div class="titles-text" @click="clickBounceds(2)">月</div>
        </div>
      </div>
      <div class="titles-modal" v-if="shows" @click="shows = false"></div>
      <div class="titles-box titles-boxs titles-modal-boxs" style="z-index: 1000" v-if="shows !== false">
        <div class="titles-text-box" style="justify-content: flex-end;">
          <span class="span-line" @click="shows = false">×</span>
        </div>
        <div class="titles-text-box">
          <div
            class="titles-texts"
            @click="jumpType(item)"
            v-for="(item, index) in propagandaType"
            :key="index">{{ item.mc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Field from '@/components/statistical/Propaganda/field';
import terminal from '@/assets/js/terminal';
export default {
  name: 'index',
  data () {
    return {
      name: {},
      column: [],
      columns: [],
      dates: [],
      brokenLine: [],
      date: [],
      dataList: [],
      dataLists: [],
      peopleList: [],
      propagandaType: [],
      userInfoData: {},
      show: false,
      shows: false,
      year: new Date().getUTCFullYear(),
      years: new Date().getUTCFullYear(),
      month: null,
      userId: '',
      chooseId: 1,
      dateFormat: `${new Date().getUTCFullYear()}-00-01`,
      dateYaer: 13,
      routerId: 0,
      count: 0,
      timeType: 1
    };
  },
  components: {
    Field
  },
  mounted() {
    this.userId = localStorage.getItem('userId');
    document.body.style.overflowY = 'auto';
    this.userInfoDatas = JSON.parse(localStorage.getItem('subordinateData3'));
    let a = JSON.parse(sessionStorage.getItem('time'));
    this.year = Number(a.year);
    this.years = Number(a.years);
    this.timeType = Number(a.timeType);
    this.userInfoData.dwid = this.userInfoDatas.id;
    this.userInfoData.lev = this.userInfoDatas.lev;
    this.query()
    this.queryType();
  },
  methods: {
    //  存日期
    saveTime () {
      let time = {
        year: this.year,
        years: this.years,
        timeType: this.timeType
      };
      sessionStorage.setItem('time', JSON.stringify(time))
    },
    //  跳转下级
    jump (data) {
      this.saveTime();
      data.path = '/index_department'
      localStorage.setItem('subordinateData2', JSON.stringify(data));
      this.$router.push({
        path: '/index_thisLevel'
      })
    },
    jumps (data) {
      this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
        '/statistical_list', data.adduserid, this.dateFormat)
    },
    //  柱状图跳转
    jumpColumn (index) {
      if (this.columns[index] > 0 ) {
        this.column.map((items, indexs) => {
          if (this.dates[index].indexOf(items.mc) === -1) {
            if (this.dates[index].indexOf('协调') !== -1) {
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1056, this.dateFormat)
            } else if (this.dates[index].indexOf('现场') !== -1){
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1057, this.dateFormat)
            }
          } else if (this.dates[index].indexOf(items.mc) !== -1){
            if (this.dates[index].indexOf('研判') !== -1) {
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1050, this.dateFormat)
            } else if (this.dates[index].indexOf('部署') !== -1){
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1051, this.dateFormat)
            } else if (this.dates[index].indexOf('培训') !== -1){
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1052, this.dateFormat)
            } else if (this.dates[index].indexOf('约谈') !== -1){
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',1055, this.dateFormat)
            } else {
              this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
                '/statistical_list',this.column[indexs].id, this.dateFormat)
            }
          }
        })
      }
    },
    //  跳转查询页
    jumpQuery (id, index, path, column, time) {
      this.saveTime();
      let query = { dwId: id, lev: index, path : '/index_department', column, time };
      sessionStorage.setItem('query', JSON.stringify(query));
      this.$router.push({
        path: path
      })
    },
    //  跳转宣传部署添加页
    jumpType (data) {
      data.router = '/index_department';
      sessionStorage.setItem('choosestyle', JSON.stringify(data));
      if(data.mc === '信息报送'){
        this.$router.push({ path: '/infobaosong' });
      }else{
        this.$router.push({ path: '/xcbs_add' });
      }
    },
    //  返回首页
    clickBack () {
      this.saveTime();
      this.$router.back();
      // this.$router.push({
      //   path: this.userInfoDatas.path
      // });
    },
    //  选择时间弹框
    clickBounceds (id) {
      this.show = false;
      this.count = 0;
      switch (id) {
        case 1:
          this.timeType = 1;
          break;
        case 2:
          this.timeType = 2;
          break;
      }
      this.query()
    },
    //  减少/增加月份或年份
    clickDate (id) {
      let that = this;
      if (id === 1) {
        switch (that.timeType) {
          case 1:
            if (that.years > 2015) {
              that.years--;
              that.query();
            }
            break;
          case 2:
            if (that.years > 2015) {
              that.year--;
              if (that.year <= 0) {
                that.years--;
                that.year = 12;
              }
              that.query();
            } else {
              if (this.year > 1) {
                that.year--;
                that.query();
              }
            }
            break;
        }
      } else {
        switch (that.timeType) {
          case 1:
            if (that.years < new Date().getUTCFullYear()) {
              that.years++;
              that.query();
            }
            break;
          case 2:
            if (that.years < new Date().getUTCFullYear()) {
              if (that.year >= 12) {
                that.year++;
                that.years++;
                that.year = 1;
              } else {
                that.year++;
              }
              that.query();
            } else {
              if (that.year !== new Date().getMonth() + 1) {
                that.year++;
                that.query();
              }
            }
            break;
        }
      }
    },
    //  清空数据
    empty () {
      this.columns = [];
      this.dates = [];
      this.brokenLine = [];
      this.date = [];
      this.dataList = [];
      this.dataLists = [];
      this.peopleList = [];
    },
    //  查询宣传部署类型
    queryType () {
      let url = `${this.$global_msg.Url.host}/partroInspection/deploymentType`;
      this.axios.get(url, { params: { userid: this.userId } }).then(res => {
      // this.axios.get(url).then(res => {
        if (res.data.code === 200) {
          this.propagandaType = res.data.rows;
        }
      }).catch( e => terminal._error(e))
    },
    //  获取日期
    getDaysInMonth (month,year) {
      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (month === '2' || month === 2) {
        daysInMonth[1] = (((0 === year % 4) && (0 !== (year % 100))) || (0 === year % 400)) === true ? 29 : 28;
      }
      let flag = month.substr(0, 1);
      if (flag === 0) {
        month = month.substr(1, 1);
      }
      return daysInMonth[month - 1];
    },
    //  统计图传参
    statisticalGinseng (data, datas) {
      let that = this;
      let b = that.timeType === 1 ? new Date().getMonth() + 1: that.year;
      let aList = [];
      let bList = [];
      let cList = [];
      if (that.timeType === 1) {
        for (let i = 1;i < 13; i++) {
          that.date.push(`${i}月`);
          aList.push(i);
          if (aList[i- 1] === i) {
            aList[i- 1] = 0;
          }
          data.map(item => {
            if (item.momth === i) {
              aList[i - 1] = item.xcbsyzs;
            }
          })
          that.brokenLine = aList;
        }
      } else {
        for (let i = 1;i < that.getDaysInMonth(b.toString(), that.years) + 1; i++) {
          that.date.push(`${i}日`);
          bList.push(i);
          if (bList[i- 1] === i) {
            bList[i- 1] = 0;
          }
          data.map(item => {
            if (i === item.day) {
              bList[i - 1] = item.xcbsyzs;
            }
          })
          that.brokenLine = bList;
        }
      }
      that.dates = ['风险研判', '安排部署', '安全培训', '桌面推演', '实战演练',
        '警示约谈', '隐患协调', '现场安全宣传', '入户安全宣传', '网络安全宣传', '报刊宣传'];
      for (let i = 0;i < that.dates.length; i++) {
        cList.push(0);
        datas.map((item) => {
          if (item.mc === that.dates[i]) {
            cList[i] = item.fxyp;
          }
        })
      }
      datas.map((item) => {
        cList[0] += item.id === 1038 ? item.fxyp : 0;
        cList[1] += item.id === 1040 ? item.fxyp : 0;
        cList[2] += item.id === 1041 ? item.fxyp : 0;
        cList[5] += item.id === 1044 ? item.fxyp : 0;
        cList[6] += item.id === 1046 ? item.fxyp : 0;
        cList[7] += item.id === 1047 ? item.fxyp : 0;
      })
      that.columns = cList;
    },
    //  查询数据
    query () {
      terminal.Start();
      let that = this;
      that.count = 0;
      let b = that.timeType === 1 ? '00' : that.year;
      if (typeof b !== 'string') {
        that.dateFormat = `${that.years}-${Number(b) < 10 ? `0${b}` : b }-01`;
      } else {
        that.dateFormat = `${that.years}-00-01`;
      }
      let params = {
        dwId: this.userInfoDatas.id,
        lev: this.userInfoDatas.lev,
        userId: this.userId,
        time: this.dateFormat,
        chooseId: this.chooseId,
      };
      if (this.userInfoDatas.lev === this.userInfoData.lev) {
        params.level = this.userInfoDatas.lev;
      }
      let a = [];
      this.empty();
      this.axios.get(`${this.$global_msg.Url.host}/partroInspection/xcbsdw`,
        { params }).then( res => {
        if (res.data.xsdw) {
          if (res.data.xsdw.length > 0) if (res.data.tit === '有数据') that.queryAll(res.data.xsdw)
        }
        this.statisticalGinseng(res.data.yzs, res.data.xcbszl);
        this.dataList = res.data.dw;
        res.data.dw.map((item, index) => {
          a.push(index);
          if (a[index] === index) {
            a[index] = 0
          }
          res.data.xsdw.map(items => {
            if (item.id === items.id) {
              a[index] = items.xsdw;
            }
          })
        })
        this.dataLists = a;
        this.column = res.data.xcbszl;
        this.name = res.data.dwVo;
        that.columns.map(item => {
          that.count += item;
        })
        terminal.end();
      }).catch( e => terminal._error(e))
    }
  },
  watch: {
    show () {
      document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'auto' : 'hidden';
    },
    shows () {
      document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'auto' : 'hidden';
    }
  }
}
</script>
<style scoped>
  @import 'index.css';
  @import 'popUp.css';
</style>
